<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        display:表示用于改变元素性质的属性
        理解为：将块级标签变为行级标签  同样也可以反向改变
        可选值：
        none 可以让当前元素直接隐藏
        block 元素以块级元素的形式显示 默认情况下 块级元素就是该值
        inline 元素以行级元素的形式显示 默认情况下 行级元素就是该值 行级元素不支持设置高度和宽度
        inline-block 设置元素时行内块元素 既能有款元素的特点又能有行元素的特点（可以设置高宽还能横着逐个摆放）



     -->
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            /* display: none;  隐藏元素不占位置 */
            /* 将块级元素设置为行级元素 */
            display: inline-block;
            /* 不推荐使用 */
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box1">哈哈哈</div>
    <div class="box2">略略略</div>
    <div class="box2">略略略</div>
    <div class="box2">略略略</div>
    <div class="box2">略略略</div>

</body>

</html>